<div class="rules_box">
  <!-- 面包屑 -->
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>

  <!-- 添加角色按钮 -->
  <el-row class="add_box">
    <!--
      点击添加角色按钮, 添加对话框
     -->
    <el-button @click="() => this.addRolesDialog = true" type="success">添加角色</el-button>
  </el-row>

  <!-- 带有二级展开的表格 -->
  <!--
    需要一个数据结构
      必须是一个多维嵌套的数据结构
   -->
  <el-row class="rolesList_box">
    <el-table
    :data="rolesList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="data">
        <!--
          每一个角色分配
            一级权限  二级权限   三级权限
                     二级权限   三级权限  三级权限
                     二级权限   三级权限  三级权限
            一级权限  二级权限   三级权限
                     二级权限   三级权限  三级权限
                     二级权限   三级权限  三级权限
         -->
         <!--
           data.row 得到的是当前这一行的数据
             以主管为例
             data.row === {
               children: [] // 保存主管所有包含的一级权限
             }
             应该循环 data.row.children 来渲染一级权限
          -->
          <el-row class="first" v-for="first in data.row.children" :key="first.id">
            <el-col :span="4">
              <el-tag @close="deleteRightsHandler(data.row.id, first.id)" closable>
                {{ first.authName }}
              </el-tag>
            </el-col>
            <el-col :span="20">
              <!--
                书写二级权限
                  因为是 v-for 循环生成的
                  first 分别表示每一行数据
                  根据 first.children 来渲染二级权限
               -->
               <el-row class="second" v-for="second in first.children" :key="second.id">
                 <el-col :span="4">
                   <el-tag @close="deleteRightsHandler(data.row.id, second.id)" closable type="warning">{{ second.authName }}</el-tag>
                 </el-col>
                 <el-col :span="20">
                   <!--
                     书写三级权限
                       因为是 v-for 生成的
                       second 表示每一行数据
                       根据 second.children 来渲染三级权限
                    -->
                    <el-col class="third" v-for="third in second.children" :key="third.id" :span="5">
                      <el-tag @close="deleteRightsHandler(data.row.id, third.id)" type="success" closable>{{ third.authName }}</el-tag>
                    </el-col>
                 </el-col>
               </el-row>
            </el-col>
          </el-row>
      </template>
    </el-table-column>
    <el-table-column
      label="序号"
      type="index"
      width="70">
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName"
      width="120">
    </el-table-column>
    <el-table-column
      label="角色描述"
      prop="roleDesc"
      width="200">
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="data">
        <el-tooltip class="item" effect="dark" content="编辑" placement="left">
          <el-button @click="showEditInfoDialog(data.row)" size="mini" type="success" circle><i class="el-icon-edit"></i></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="删除" placement="top">
          <!--
            点击删除按钮
              删除当前角色内容
           -->
          <el-button @click="deleteRolesHandler(data.row.id)" size="mini" type="danger" circle><i class="el-icon-delete"></i></el-button>
        </el-tooltip>
        <!--
          点击分配权限
            拿到当前角色权限, 设置在 checkedRightsList 数组内
         -->
        <el-tooltip class="item" effect="dark" content="分配权限" placement="right">
          <el-button @click="showEditRightsHandler(data.row.children, data.row.id)" size="mini" type="primary" circle><i class="el-icon-setting"></i></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  </el-row>

  <!-- 添加角色对话框 -->
  <!--
    为了保证每次打开的都是新的对话框
      需要在每次关闭的时候重置
   -->
  <el-dialog title="添加角色" :visible.sync="addRolesDialog">
    <el-form ref="addRoles" :rules="addRolesRules" :model="addRolesInfo">
      <el-form-item label="角色名称" label-width="800" prop="roleName">
        <el-input v-model="addRolesInfo.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" label-width="800" prop="roleDesc">
        <el-input v-model="addRolesInfo.roleDesc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮时, 关闭对话框 -->
      <el-button @click="() => this.addRolesDialog = false">取 消</el-button>
      <!-- 点击确认添加角色按钮 -->
      <el-button @click="addRolesHandler" type="success">添加角色</el-button>
    </div>
  </el-dialog>

  <!-- 编辑权限信息对话框 -->
  <el-dialog title="编辑角色" :visible.sync="editRolesDialog">
    <el-form ref="editRoles" :rules="addRolesRules" :model="editRolesInfo">
      <el-form-item label="角色名称" label-width="800" prop="roleName">
        <el-input v-model="editRolesInfo.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" label-width="800" prop="roleDesc">
        <el-input v-model="editRolesInfo.roleDesc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮时, 关闭对话框 -->
      <el-button @click="() => this.editRolesDialog = false">取 消</el-button>
      <!-- 点击确认编辑按钮 -->
      <el-button @click="editRolesInfoHandler" type="success">确认编辑</el-button>
    </div>
  </el-dialog>

  <!-- 分配权限对话框 -->
  <el-dialog @closed="closeRightsDialog" title="分配权限" :visible.sync="editRightsDialog">
    <!--
      需要一个树状菜单
        把所有权限都展示出来, 带有复选框
        默认情况下把该角色拥有的权限选中

      数据
        data 是菜单中的数据
        show-checkbox 显示复选框
        node-key 菜单按结构展开
        default-expanded-keys 默认展开项
        default-checked-keys 默认选中项
        props 关联信息使用, 值是一个对象数据类型, 书写对象字段和文本字段
     -->
     <!--
       问题: 树状菜单只要被创建, 内部选中状态就无法更改
       解决: 使用 v-if, 每次让树状菜单重新加载一遍
      -->
    <el-tree
      ref="rightsTree"
      v-if="editRightsDialog"
      :data="rightsList"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="checkedRightsList"
      :props="rightsTreeInfo">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <!-- 点击取消按钮时, 关闭对话框 -->
      <el-button @click="() => this.editRightsDialog = false">取 消</el-button>
      <!-- 点击确认权限分配按钮 -->
      <el-button @click="editRightsInfoHandler" type="success">确认权限分配</el-button>
    </div>
  </el-dialog>

</div>